Line Height is an important typography property in Figma that controls the vertical distance between lines of text. It plays a major role in readability, visual hierarchy, spacing, text rhythm, and the overall appearance of paragraphs, headings, buttons, forms, cards, dashboards, websites, and mobile applications.
Line Height works together with font family, font size, font weight, letter spacing, text width, and paragraph spacing. A suitable line height makes text comfortable to read, while an excessively small or large line height can make a design feel cramped or disconnected. JustAcademy Figma Training can help you learn Figma, typography, UI design, design systems, and practical design workflows systematically. You can also use Register for Figma Course Demo to explore the course.
Line Height is the vertical distance between lines of text in a text block. It determines how much vertical space is available for each line and strongly affects the readability and visual rhythm of multi-line content.
Line Height
|
+-- Distance Between Lines
|
+-- Text Rhythm
|
+-- Vertical Spacing
|
v
Readable Text
For example, if a paragraph uses a font size of 16px and a line height of 24px, each line receives a 24px line-height value in a fixed-line-height setup.
Line height helps users comfortably move from one line to the next. Without appropriate line spacing, paragraphs can become difficult to scan and headings can look either too compressed or too loose.
Figma provides Line Height as a typography property in the Typography section of the right sidebar. It can be adjusted for selected text layers or selected text ranges.
Select Text Layer
|
v
Typography Section
|
v
Line Height
|
+-- Auto
+-- Fixed Value
+-- Percentage
|
v
Review Text
Figma allows line height to be represented using fixed pixel values or as a percentage of the font size. By default, line height is Auto, which is calculated using the font's default line height.
Line height and font size are closely related but they are not the same property. Font size controls the scale of the characters, while line height controls the vertical distance allocated to each line of text.
| Property | Purpose | Example |
|---|---|---|
| Font Size | Controls text scale | 16px |
| Line Height | Controls vertical distance between lines | 24px |
| Font Weight | Controls character thickness | 400 |
| Letter Spacing | Controls horizontal character spacing | 0px |
Font Size: 16px
Line Height: 24px
Line 1: Design better products.
Line 2: Build better experiences.
Line 3: Create better interfaces.
The 24px line height creates vertical space between the lines while the 16px font size controls the size of the characters.
Line height controls the vertical relationship between lines within a paragraph, while paragraph spacing controls the space between separate paragraphs.
| Property | Controls | Example |
|---|---|---|
| Line Height | Space between lines | 24px |
| Paragraph Spacing | Space between paragraphs | 16px |
Paragraph 1
Line 1
Line 2
Line 3
|
+-- Line Height
|
v
Paragraph 2
Line 1
Line 2
|
+-- Paragraph Spacing
|
v
Paragraph 3
Select Text
|
v
Typography
|
v
Line Height
|
v
Choose Value
|
v
Apply
|
v
Review Readability
Figma sets Line Height to Auto by default. Auto line height is calculated using the font's default line-height behavior, which can vary between typefaces.
Line Height
|
v
Auto
|
v
Font Default
|
v
Calculated Vertical Spacing
Auto can be useful when you want the font's default behavior, but explicit line-height values are often useful when creating a consistent typography system.
A fixed line height uses a specific numerical value, such as 20px, 24px, 32px, or 40px. This provides direct control over the vertical space allocated to each line.
Font Size: 16px
Line Height: 24px
16px = Character Scale
24px = Line Height
Fixed values can be useful when creating predictable typography systems and developer-ready design specifications.
Line height can also be represented as a percentage of the font size. This allows the vertical spacing to scale relative to the text size.
Font Size = 16px
Line Height = 150%
Calculation:
16 × 1.5 = 24px
Result:
24px line height
Percentage-based line height can be useful when a design system wants spacing to remain proportional to the selected font size.
| Type | Example | Behavior |
|---|---|---|
| Fixed | 24px | Uses a specific vertical value |
| Percentage | 150% | Calculated relative to font size |
| Auto | Auto | Uses font-dependent default calculation |
Line height has a direct effect on reading comfort. Lines that are too close together can make it difficult for the eye to move from one line to another. Lines that are too far apart can make the paragraph feel disconnected.
Too Tight
Line 1
Line 2
Line 3
|
v
Difficult to Scan
Balanced
Line 1
Line 2
Line 3
|
v
Comfortable
Too Loose
Line 1
Line 2
Line 3
|
v
Disconnected
A very small line height can cause lines to visually collide, especially when text uses a large font size or contains characters with tall ascenders and descenders.
An excessively large line height creates too much vertical distance between lines and can make a paragraph feel fragmented.
A balanced line height creates enough separation between lines while maintaining a strong visual connection between them.
Balanced Typography
|
+-- Font Size
|
+-- Line Height
|
+-- Text Width
|
+-- Font Family
|
v
Readable Text Block
The following values are examples rather than universal rules. The ideal line height depends on the font family, font size, content, platform, and design system.
| Font Size | Example Line Height | Typical Usage |
|---|---|---|
| 12px | 16px | Caption and metadata |
| 14px | 20px | Small body text |
| 16px | 24px | Body text |
| 18px | 28px | Large body text |
| 20px | 30px | Lead content |
| 24px | 32px | Small headings |
| 32px | 40px | Section headings |
| 40px | 48px | Large headings |
| 48px | 56px | Display headings |
| 56px | 64px | Large hero typography |
Body text usually requires enough vertical spacing to support continuous reading. A commonly used starting point is a line height around 1.4 to 1.6 times the font size, but the best value depends on the typeface and content.
Body Text
16px Font Size
24px Line Height
Result:
Comfortable Paragraph Rhythm
Headings generally use tighter line heights than long-form body text because headings are shorter and need to maintain strong visual grouping.
| Heading | Example Font Size | Example Line Height |
|---|---|---|
| H1 | 40px | 48px |
| H2 | 32px | 40px |
| H3 | 24px | 32px |
| H4 | 20px | 28px |
Large display text often uses a relatively tight line height because oversized typography can otherwise consume excessive vertical space.
Hero Heading
56px Font Size
64px Line Height
Build Better
Digital Products
The final value should always be tested visually because different typefaces have different proportions.
Paragraphs benefit from a comfortable line height because users may need to read multiple lines continuously.
Font Size: 16px
Line Height: 24px
Design systems help teams create
consistent and reusable interfaces.
Typography is an important part of
that system.
Button labels are generally short, but line height still affects vertical alignment and the visual balance of the component.
+----------------------+
| Create Account |
+----------------------+
For single-line buttons, designers should check that the line height works naturally with the button height and vertical padding.
Navigation labels should have enough line height to remain readable while maintaining a compact navigation layout.
Home | Products | Pricing | About | ContactIf navigation items can wrap on smaller screens, line height becomes even more important.
Forms contain labels, inputs, helper text, validation messages, and buttons. Consistent line height helps establish clear relationships between these elements.
| Form Element | Example Font Size | Example Line Height |
|---|---|---|
| Label | 14px | 20px |
| Input | 16px | 24px |
| Helper Text | 12px | 18px |
| Error Message | 14px | 20px |
| Button | 16px | 24px |
Cards often contain titles, descriptions, metadata, prices, and actions. Each text level can have its own line-height relationship.
Card
|
+-- Title
| 20px / 28px
|
+-- Description
| 14px / 20px
|
+-- Metadata
| 12px / 16px
|
+-- Action
14px / 20px
Dashboards contain metrics, tables, filters, charts, labels, and navigation. A consistent line-height system helps create an organized visual rhythm.
| Dashboard Element | Example Size | Example Line Height |
|---|---|---|
| Page Title | 32px | 40px |
| Metric Value | 32px | 40px |
| Metric Label | 14px | 20px |
| Table Header | 14px | 20px |
| Table Content | 14px | 20px |
| Helper Text | 12px | 16px |
E-commerce interfaces contain product titles, descriptions, prices, discounts, delivery information, ratings, and buttons. Appropriate line height makes product information easier to scan.
Wireless Headphones
20px / 28px
Premium wireless audio experience.
14px / 20px
₹2,499
24px / 32px
Free Delivery
14px / 20px
Mobile screens have limited space, so line height must provide readability without consuming unnecessary vertical space.
Mobile Typography
|
+-- App Title
+-- Section Heading
+-- Body
+-- Label
+-- Helper Text
+-- Button
|
v
Balanced Mobile Layout
Always test line height using actual mobile-sized frames rather than judging only from a large desktop canvas.
Landing pages often combine large hero headings, supporting paragraphs, feature sections, testimonials, pricing, and calls to action. Each text category may require a different line-height relationship.
Hero Heading
56px / 64px
Supporting Text
18px / 28px
Section Heading
32px / 40px
Body
16px / 24px
CTA
16px / 24px
Line height should always be considered together with text width. A narrow text box creates more lines, which makes line height more noticeable. A very wide text block can reduce reading comfort even when line height is appropriate.
Wide Text
Long Line
Long Line
Long Line
Narrow Text
Short Line
Short Line
Short Line
Short Line
Short Line
Typography should balance font size, line height, and readable text width.
When text wraps onto multiple lines, line height determines the vertical distance between those lines. Therefore, wrapping behavior and line height should be tested together.
One Line
Build Better Products
Two Lines
Build Better
Products
Three Lines
Build Better
Digital
Products
Long headings and descriptions should always be tested with realistic content.
Font weight changes the visual density of text, while line height controls vertical spacing. Heavier weights can sometimes make a text block feel denser even when the numerical line height remains unchanged.
Bold Heading
32px / 40px / 700
Regular Body
16px / 24px / 400
Designers should evaluate the combined visual effect of font size, weight, and line height.
Line height controls vertical spacing, while letter spacing controls horizontal spacing between characters. Both can influence the overall rhythm of typography.
| Property | Direction | Purpose |
|---|---|---|
| Line Height | Vertical | Space between lines |
| Letter Spacing | Horizontal | Space between characters |
Typography hierarchy is created by combining several properties rather than line height alone.
Typography Hierarchy
|
+-- Font Family
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
+-- Text Width
|
v
Clear Visual Structure
Visual rhythm is the consistent pattern of spacing that guides users through a design. Line height contributes to this rhythm by controlling the vertical relationship between lines of text.
Heading
|
v
Line Height
|
v
Paragraph
|
v
Paragraph Spacing
|
v
Next Heading
A consistent rhythm makes interfaces feel organized and intentional.
Readable line spacing is an important part of accessible typography. Text should not feel cramped, and users should be able to follow lines comfortably.
Articles, blogs, documentation, tutorials, and educational content require comfortable line spacing because users may read several paragraphs continuously.
Long Form Content
|
+-- Readable Font Size
+-- Comfortable Line Height
+-- Controlled Text Width
+-- Paragraph Spacing
|
v
Better Reading Experience
Long-form content generally benefits from more generous line spacing than compact UI labels.
Captions and metadata are usually smaller than body text, so their line height should remain readable without creating excessive vertical space.
| Caption Style | Example |
|---|---|
| Font Size | 12px |
| Line Height | 16px to 18px |
| Weight | 400 |
These are example values and should be adapted to the selected typeface.
Labels need enough line height to remain readable while fitting efficiently into compact components.
Label
Font Size: 14px
Line Height: 20px
Weight: Medium
Error messages should be readable and clearly associated with the relevant field. A consistent line height helps prevent validation text from looking cramped.
Password
[ ******** ]
Password must contain at least
8 characters.
If an error message wraps onto multiple lines, the line-height value becomes especially important.
Helper text provides additional instructions below form fields, controls, or content. It is usually smaller than primary content but still needs comfortable line spacing.
Username
Use an email address that you
can access regularly.
Quotes may use larger typography and a different line-height relationship to create visual emphasis.
“Good design makes
information easier to
understand.”
24px / 36px
The line height should support the intended editorial style without making the quote unnecessarily tall.
Tables require compact but readable typography. Excessive line height can make tables unnecessarily tall, while insufficient line height can reduce readability.
| Table Element | Example Size | Example Line Height |
|---|---|---|
| Header | 14px | 20px |
| Body | 14px | 20px |
| Secondary Data | 12px | 16px |
Charts and analytics interfaces often contain metric values, axis labels, legends, tooltips, and chart headings. Line height should be appropriate for each level.
Total Revenue
32px / 40px
Monthly Revenue
14px / 20px
January
14px / 20px
Pricing sections often use large prices with supporting billing information. The price and supporting text should have distinct but compatible line heights.
Pro Plan
₹999
40px / 48px
per month
14px / 20px
Unlimited projects
14px / 20px
Navigation menus should maintain consistent line height across menu items. Active and inactive states should not unexpectedly change the layout.
Navigation
Home
Products
Services
Pricing
Contact
Consistent:
14px / 20px
Changing font weight between active and inactive states should not create unwanted layout shifts. Designers should check whether the selected font metrics cause noticeable changes.
Inactive
Products
14px / 20px / Regular
Active
Products
14px / 20px / Semibold
Line height becomes especially important when text layers are placed inside Auto Layout frames. A change in line height can change the height of the text layer and therefore affect surrounding spacing.
Auto Layout Frame
|
+-- Heading
|
+-- Paragraph
|
+-- Button
|
v
Vertical Layout
When line height changes, review the spacing and overall component height.
Line height and text resizing are different concepts. Line height controls vertical spacing between lines, while text resizing controls how the text layer's dimensions respond to its content.
| Feature | Purpose |
|---|---|
| Line Height | Controls vertical spacing between lines |
| Auto Width | Allows text to grow horizontally |
| Auto Height | Allows height to adapt to content |
| Fixed Size | Maintains defined text-layer dimensions |
The text layer's bounding box and line height are related but are not the same thing. Line height is a typography property, while the bounding box controls the dimensions and positioning area of the text layer.
Text Layer
|
+-- Typography
| |
| +-- Font Size
| +-- Line Height
| +-- Weight
|
+-- Bounding Box
| |
| +-- Width
| +-- Height
|
v
Complete Text Layout
When a text layer uses an appropriate resizing behavior, its height can adapt to the amount of content. Line height influences how tall the resulting text block becomes.
More Lines
|
v
More Line Height Units
|
v
Taller Text Layer
Fewer Lines
|
v
Fewer Line Height Units
|
v
Shorter Text Layer
Fixed-size text layers have defined dimensions. If content wraps to additional lines, the line height determines the vertical spacing inside the text block.
Fixed Text Box
+----------------------+
| Line One |
| |
| Line Two |
| |
| Line Three |
+----------------------+
Designers should make sure the fixed height is sufficient for realistic content.
Responsive typography may require different line heights at different screen sizes. A large desktop heading may use a larger line height while the mobile version may use a smaller value.
Desktop
56px / 64px
|
v
Tablet
44px / 52px
|
v
Mobile
32px / 40px
These values are examples rather than fixed standards.
Responsive line height should preserve readability and hierarchy as the screen width changes. Designers should test headings and paragraphs at multiple breakpoints.
| Device | Example Font Size | Example Line Height |
|---|---|---|
| Desktop | 48px | 56px |
| Tablet | 40px | 48px |
| Mobile | 32px | 40px |
Desktop interfaces generally provide more space, allowing larger headings and longer text blocks. Line height should be balanced with the available content width.
Desktop
+--------------------------------+
| Build Better Digital Products |
| |
| Design and collaborate with |
| your team. |
+--------------------------------+
Tablet layouts require careful testing because text blocks have less horizontal space than desktop layouts but more space than many mobile layouts.
Tablet
+--------------------------+
| Build Better Products |
| |
| Design and collaborate |
| with your team. |
+--------------------------+
Mobile text often wraps into more lines, making line height particularly important.
Mobile
+----------------+
| Build Better |
| Digital |
| Products |
| |
| Design and |
| collaborate |
| with your team.|
+----------------+
Large headings should be tested with multiple lines because a line-height value that looks good for one line may not feel appropriate when the heading wraps.
One Line
Build Better Products
Two Lines
Build Better
Digital Products
Three Lines
Build Better
Digital Products
Together
Adjust font size, line height, width, or responsive rules when necessary.
Different languages and scripts can have different character shapes and vertical metrics. A line-height value that looks comfortable for one language may require visual testing in another.
English
Build Better Products
Hindi
बेहतर डिजिटल उत्पाद बनाएं
Japanese
より良いデジタル製品を作る
Multilingual interfaces should be tested using real translated content rather than relying only on placeholder text.
Numbers are commonly used in dashboards, analytics, finance, e-commerce, and pricing interfaces. Large numbers may need a tighter or carefully tuned line height to remain visually balanced.
Total Revenue
₹8,45,000
32px / 40px
Orders
3,240
24px / 32px
Growth
98.75%
16px / 24px
When text appears next to icons, line height should be considered together with icon size and vertical alignment. The goal is to create a visually centered relationship.
+----------------------+
| [Icon] Notifications |
+----------------------+
Do not assume that matching numerical heights automatically creates perfect visual alignment. Review the result on the canvas.
Buttons containing both icons and text need careful vertical alignment. The line height of the label should work with the icon dimensions and button padding.
+-------------------------+
| [ + ] Create Project |
+-------------------------+
Use consistent component rules so icon and text alignment remains predictable across button sizes.
A design system should define line-height values or relationships alongside font sizes and weights. This creates predictable typography across components and screens.
Design System
|
+-- Font Family
|
+-- Font Size
|
+-- Font Weight
|
+-- Line Height
|
+-- Letter Spacing
|
v
Typography System
Line-height tokens can provide reusable values for different typography categories.
Line Height Tokens
|
+-- LineHeight/XS
+-- LineHeight/SM
+-- LineHeight/MD
+-- LineHeight/LG
+-- LineHeight/XL
+-- LineHeight/Display
Token names and values should be defined according to the requirements of the design system.
Figma number variables can be applied to font properties, including line height. This can help teams create reusable and maintainable typography values.
Typography Variables
|
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
|
v
Reusable Typography Values
Variables can reduce repeated manual values and make system-wide typography changes easier to manage.
Figma text styles can include line height along with font family, weight, size, and letter spacing. This makes line-height rules reusable across text layers.
Text Style
|
+-- Font Family
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
|
v
Reusable Typography
Text Layer
|
v
Typography
|
+-- Size
+-- Weight
+-- Line Height
+-- Letter Spacing
|
v
Create Text Style
|
v
Reuse Across Design
Semantic naming makes typography systems easier to understand because the style name communicates the purpose of the text rather than only its numerical value.
Typography
|
+-- Display/Large
+-- Heading/H1
+-- Heading/H2
+-- Heading/H3
+-- Body/Large
+-- Body/Regular
+-- Body/Small
+-- Label/Medium
+-- Caption/Small
| Style | Font Size | Weight | Example Line Height |
|---|---|---|---|
| Display | 56px | 700 | 64px |
| H1 | 40px | 700 | 48px |
| H2 | 32px | 600 | 40px |
| H3 | 24px | 600 | 32px |
| Body Large | 18px | 400 | 28px |
| Body | 16px | 400 | 24px |
| Body Small | 14px | 400 | 20px |
| Label | 14px | 500 | 20px |
| Caption | 12px | 400 | 16px |
This is an example system for learning and should be adapted to the selected typeface and product requirements.
When a shared text style is updated, the typography values of text layers using that style can update consistently. This makes global line-height adjustments easier to manage.
Text Style
|
v
Change Line Height
|
v
Save Style
|
v
Linked Text Layers
|
v
Updated Typography
Developers need to understand the intended line-height behavior when implementing a design. Figma Dev Mode can expose typography properties such as font family, font size, weight, line height, and letter spacing.
Figma Design
|
v
Text Layer
|
v
Dev Mode
|
+-- Font Family
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
|
v
Development
| Figma Property | Typical CSS Equivalent |
|---|---|
| Font Family | font-family |
| Font Size | font-size |
| Font Weight | font-weight |
| Line Height | line-height |
| Letter Spacing | letter-spacing |
body {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
h1 {
font-size: 40px;
font-weight: 700;
line-height: 48px;
}
The CSS values are conceptual examples. Actual implementation should follow the production font, browser behavior, platform requirements, and project design system.
Choose Font Family
|
v
Choose Font Size
|
v
Choose Font Weight
|
v
Set Initial Line Height
|
v
Review Text Width
|
v
Test Multi-Line Content
|
v
Check Readability
|
v
Create Text Style
|
v
Test Responsive Layout
|
v
Review Accessibility
|
v
Document Typography
Create a complete typography system for a modern website using consistent line-height values.
Website Typography
Hero Heading
56px / 64px / 700
Section Heading
32px / 40px / 600
Body Text
16px / 24px / 400
Button
16px / 24px / 600
Caption
12px / 16px / 400
Create a dashboard typography system using different line-height values for metrics, labels, tables, and supporting content.
Analytics Dashboard
Total Revenue
₹8,45,000
32px / 40px / 700
Total Orders
3,240
28px / 36px / 700
Active Users
12,450
28px / 36px / 700
Metric Label
14px / 20px / 400
Helper Text
12px / 16px / 400
Create a product card using different typography levels and appropriate line-height values.
Wireless Headphones
20px / 28px / 600
Premium wireless audio experience.
14px / 20px / 400
₹2,499
24px / 32px / 700
20% OFF
14px / 20px / 600
Free Delivery
14px / 20px / 400
[ Add to Cart ]
16px / 24px / 600
Create a typography system for a mobile application with carefully balanced line heights.
Profile
Welcome Back
28px / 36px / 700
Account Settings
18px / 26px / 600
Notifications
16px / 24px / 400
Security
16px / 24px / 400
Password
14px / 20px / 500
[ Change Password ]
14px / 20px / 600
Line Height is a typography property that controls the vertical distance between lines of text.
Line Height improves readability, visual rhythm, hierarchy, and the overall spacing of multi-line text.
Font size controls the scale of the characters, while line height controls the vertical spacing allocated between lines of text.
Select a text layer and use the Line Height control in the Typography section of the right sidebar.
Auto Line Height uses a value calculated from the font's default line-height behavior, which can vary between typefaces.
Yes. Figma allows fixed line-height values such as 24px or 32px.
Yes. Figma allows line height to be represented as a percentage of the font size.
Text can become cramped and difficult to read because the lines are visually too close together.
Text can look disconnected and consume unnecessary vertical space.
Not necessarily. Headings and body text have different readability and hierarchy requirements, so they often use different line-height relationships.
Yes. For multi-line text, changing line height changes the vertical space occupied by the text and can therefore affect the resulting text-layer dimensions.
Yes. Figma text styles can include line height along with font family, font size, font weight, letter spacing, and other supported text properties.
A common starting point is around 1.4 to 1.6 times the font size, but the final value should be determined by the font, content, and design system.
It can. Responsive typography may use different font sizes and line heights at different screen sizes when necessary.
Real content reveals wrapping, paragraph length, heading height, and readability issues that may not appear with short placeholder text.
Create a complete Line Height system for a modern e-commerce website in Figma.
Line Height is a fundamental typography property in Figma that controls the vertical distance between lines of text. It has a major influence on readability, hierarchy, visual rhythm, component height, and the overall quality of a digital interface.
A professional typography system should not choose line-height values randomly. Line Height should be considered together with font family, font size, font weight, letter spacing, text width, paragraph spacing, and responsive behavior. A well-designed typography system creates predictable and comfortable reading experiences across websites, mobile applications, dashboards, e-commerce interfaces, landing pages, and design systems.
Designers should test line height with realistic content, long headings, multi-line paragraphs, numbers, forms, buttons, multilingual text, Auto Layout components, and different screen sizes. The goal is to create typography that is visually balanced, readable, scalable, and easy for developers to implement.
To learn professional Figma design, typography, UI design, design systems, and practical project workflows through structured training, visit JustAcademy Figma Training and use the Register for Figma Course Demo option.
